<template>
	<header>
		<h1 class="webTitle">SAM9029 STU SYSTEM</h1>
    <div>
      <h3 class="loginTip">login</h3>
      <ul class="loginHref">
        <li><a href="javascript:void(0)">Login</a></li>
        <li><a href="javascript:void(0)">Signup</a></li>
      </ul>  
    </div>
    
	</header>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header h1.webTitle{
  flex: 1;
}
header div{
    /*为login 弹出绝对定位做准备*/
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px 0 0 0;
    height: fit-content;
}
header div:hover > ul.loginHref{
  display: block;
}
header h3.loginTip{
  padding: 10px;
}
header ul.loginHref{
  display: none;
  position: relative;
  top: 100%;
  padding:10px;
  box-shadow:
  0px 0px 0.8px rgba(0, 0, 0, 0.12),
  0px 0px 6px rgba(0, 0, 0, 0.23);
  background-color: #CACACA;
  opacity: 0.8;
  border-radius: 10px;
  border: none;
}
header ul.loginHref li a{
  display: block;
  color: black;
  padding:10px 0;
}


</style>
